.main {
  width: 100%;
  min-height: 100vh;
  background: rgb(236, 236, 236);
  background-size: cover;
  user-select: none;
  display: flex;
  .main-left {
    flex-basis: 300px;
    background-color: rgb(61, 68, 94);
  }
  .main-right {
    flex: 1;
    .main-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 70px;
      padding: 0 10px 0 30px;
      background-color: #fff;
      font-size: 1.3rem;
      .menu-list {
        font-size: 16px;
      }
    }
    .main-wrapper {
      height: calc(100vh - 70px);
      overflow-x: hidden;
      .react-grid-item.react-grid-placeholder {
        background: rgb(57, 183, 241);
        opacity: 0.1;
        transition-duration: 100ms;
        z-index: 2;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
      }
    }
  }
}

.setting-btn {
  color: rgba(0,0,0,.65);
  &:hover {
    .anticon.anticon-heart {
      animation: heart-beat 1s;
    }
  }
}

@keyframes heart-beat {
  20% {
    color: rgb(241, 75, 75);
    transform: rotateZ(30deg) scale(1.1);
  }
  60% {
    color: rgb(241, 75, 75);
    transform: rotateZ(-35deg) scale(1.15);
  }
  90% {
    color: rgb(241, 75, 75);
    transform: rotateZ(15deg) scale(1.05);
  }
}
